<template>
    <v-container>
        <v-row>
            <v-col>
                <v-data-table :headers="headers" :items="toolTypes" class="elevation-1">
                    <template v-slot:top>
                        <v-toolbar flat>
                            <v-toolbar-title>工具类型列表</v-toolbar-title>
                            <v-divider class="mx-4" inset vertical></v-divider>
                            <v-spacer></v-spacer>
                            <v-dialog v-model="dialog" max-width="300px">
                                <template v-slot:activator="{ on, attrs }">
                                    <v-btn color="primary" dark class="mb-2" v-bind="attrs" v-on="on">
                                        添加
                                    </v-btn>
                                </template>
                                <v-card class="pa-6">
                                    <v-card-title>
                                        <span class="text-h5">添加新类型</span>
                                    </v-card-title>

                                    <v-form ref="form" v-model="valid" lazy-validation>
                                        <v-text-field v-model="name" label="名称" :rules="nameRules"
                                            :counter="100"></v-text-field>
                                    </v-form>

                                    <v-card-actions>
                                        <v-spacer></v-spacer>
                                        <v-btn color="blue darken-1" text @click="close">
                                            取消
                                        </v-btn>
                                        <v-btn :disabled="!valid" color="blue darken-1" text @click="save">
                                            保存
                                        </v-btn>
                                    </v-card-actions>
                                </v-card>
                            </v-dialog>
                            <v-dialog v-model="dialogDelete" max-width="300px">
                                <v-card>
                                    <v-card-title class="text-h6">确定要删除这条记录吗？</v-card-title>
                                    <v-card-actions>
                                        <v-spacer></v-spacer>
                                        <v-btn color="blue darken-1" text @click="closeDelete">取消</v-btn>
                                        <v-btn color="blue darken-1" text @click="deleteItemConfirm">确定</v-btn>
                                        <v-spacer></v-spacer>
                                    </v-card-actions>
                                </v-card>
                            </v-dialog>
                        </v-toolbar>
                    </template>
                    <template v-slot:[`item.actions`]="{ item }">
                        <v-icon small @click="deleteItem(item)">
                            mdi-delete
                        </v-icon>
                    </template>
                    <template v-slot:no-data>
                        没有数据！
                    </template>
                </v-data-table>
            </v-col>
        </v-row>
        <v-row>
            <v-col>
                <v-snackbar v-if="!failed" v-model="alert" :timeout="3000" color="success">
                    {{ info }}
                </v-snackbar>
                <v-snackbar v-else v-model="alert">
                    {{ info }}

                    <template v-slot:action="{ attrs }">
                        <v-btn color="red" text v-bind="attrs" @click="alert = false">
                            关闭
                        </v-btn>
                    </template>
                </v-snackbar>
            </v-col>
        </v-row>
    </v-container>
</template>

<script>
export default {
    data: () => ({
        dialog: false,
        dialogDelete: false,
        headers: [
            {
                text: '名称',
                align: 'start',
                sortable: false,
                value: 'name',
            },
            { text: '动作', value: 'actions', sortable: false },
        ],
        toolTypes: [
            {
                id: 1,
                name: '钳子',
            },
            {
                id: 2,
                name: '改锥',
            },
            {
                id: 3,
                name: '扳手',
            },
        ],
        valid: true,
        nameRules: [
            v => !!v || "名称不能为空",
            v => (v && v.length <= 100) || "用户名必须小于100个字符",
        ],
        name: '',
        id: 0,

        alert: false,
        info: '',
        failed: false,
    }),

    watch: {
        dialog(val) {
            val || this.close()
        },
        dialogDelete(val) {
            val || this.closeDelete()
        },
    },

    methods: {
        deleteItem(item) {
            this.id = item.id
            this.dialogDelete = true
        },

        deleteItemConfirm() {
            this.toolManage.delToolType(this.id).then(retVal => {
                if (retVal === true) {
                    this.info = '删除成功'
                    this.failed = false
                    this.alert = true

                    this.toolManage.getToolTypes().then(retVal => this.toolTypes = JSON.parse(retVal))
                } else {
                    this.info = '删除失败'
                    this.failed = true
                    this.alert = true
                }
            })
            this.closeDelete()
        },

        close() {
            this.dialog = false
            this.$nextTick(() => {
                this.id = 0
                this.name = ''
                this.$refs.form.reset()
            })
        },

        closeDelete() {
            this.dialogDelete = false
            this.$nextTick(() => {
                this.id = 0
                this.name = ''
            })
        },

        save() {
            if (this.$refs.form.validate()) {
                this.toolManage.addToolType(this.name).then(retVal => {
                    if (retVal === true) {
                        this.info = '添加成功'
                        this.failed = false
                        this.alert = true

                        this.toolManage.getToolTypes().then(retVal => this.toolTypes = JSON.parse(retVal))
                    } else {
                        this.info = '添加失败'
                        this.failed = true
                        this.alert = true
                    }
                })
                this.close()
            }
        },
    },
    mounted: function () {
        this.toolManage.getToolTypes().then(retVal => this.toolTypes = JSON.parse(retVal))
    }
}
</script>